<template>
    <div class="container">
        <!-- vue2.0 获取单个元素 -->
        <!-- 1. 通过ref属性绑定该元素 -->
        <!-- 2. 通过this.$refs.box获取元素 -->
        <!-- <div ref="box">我是box</div> -->
        <!-- vue2.0 获取v-for遍历的多个元素 -->
        <!-- 1. 通过ref属性绑定被遍历元素 -->
        <!-- 2. 通过this.$refs.li 获取所有遍历元素  -->
        <!-- <ul>
        <li v-for="i in 4" :key="i" ref="li">{{i}}</li>
      </ul> -->

        <!-- 单个元素 -->
        <div ref="dom">我是box</div>
        <!-- 被遍历的元素 -->
        <ul>
            <li v-for="i in 4" :key="i" :ref="setDom">第{{ i }}LI</li>
        </ul>
    </div>
</template>
<script>
import { onMounted, ref, onBeforeUpdate } from 'vue'
export default {
    name: 'App',
    setup() {
        // 1. 获取单个元素
        // 1.1 先定义一个空的响应式数据ref定义的
        // 1.2 setup中返回该数据，你想获取那个dom元素，在该元素上使用ref属性绑定该数据即可。
        const dom = ref(null)
        onMounted(() => {
            console.log(dom.value)
        })

        // 2. 获取v-for遍历的元素
        // 2.1 定义一个空数组，接收所有的LI
        // 2.2 定义一个函数，往空数组push DOM
        const domList = []
        const setDom = (el) => {
            console.log(el)
            domList.push(el)
        }
        // onBeforeUpdate(() => {
        //     console.log("onBeforeUpdate")
        //     domList = []
        // })
        onMounted(() => {
            console.log(domList)
        })
        return { dom, setDom }
    }
}
</script>
<style scoped lang="less">

</style>